<template>
    <div class="photoinfo-container">
        <h3>{{ photoinfos.title}}</h3>
        <p class="subtitle">
            <span>{{ photoinfos.add_time | dateFormat}}</span>
            <span>点击：{{ photoinfos.click }}次</span>
        </p>

        <hr>
        
        <!-- 缩略图 -->
        <div class="thumbs">
            <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
        </div>
        
        <!-- 图片内容 -->
        <div class="content">{{ photoinfos.content}}</div>


        <!-- 放置评论子组件 -->
        <cmt-box></cmt-box>
    </div>
</template>

<script>
// 导入评论子组件
import comment from '../subcomponents/comment.vue'

export default {
    data() {
        return {
            id:this.$route.params.id, // 从路由获取的id
            photoinfos:{
                id:'1',
                add_time:new Date(),
                click:3,
                content:'这是一个很假很假的数据段。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈！！',
                title:'关于母猪护理'
            },
            slide1:[//缩略图的数组
                {
                    src: 'src/images/img01.jpg',
                    msrc: 'src/images/img01.jpg',
                    alt: 'picture1',
                    title: '图 1',
                    w: 500,
                    h: 330
                },
                {
                    src: 'src/images/img02.jpg',
                    msrc: 'src/images/img02.jpg',
                    alt: 'picture2',
                    title: '图 2',
                    w: 500,
                    h: 330
                },{
                    src: 'src/images/img03.jpg',
                    msrc: 'src/images/img03.jpg',
                    alt: 'picture1',
                    title: '图 3',
                    w: 500,
                    h: 330
                },
                {
                    src: 'src/images/img04.jpg',
                    msrc: 'src/images/img04.jpg',
                    alt: 'picture2',
                    title: '图 4',
                    w: 500,
                    h: 330
                }
            ]
        }
    },
    methods: {  },
    components:{
        // 注册评论子组件
        'cmt-box':comment
    }
}
</script>

<style lang="scss" scoped>
.photoinfo-container{
    padding: 3px;
    h3{
        color: #26A2FF;
        font-size: 15px;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle{
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }
    .content{
        font-size: 13px;
        line-height: 30px;
    }
    .thumbs { // 缩略图样式
            /deep/ .my-gallery{   //deep深层作用选择器
                display: flex;
                flex-wrap:wrap;//默认换行
                figure{
                    width: 30%;
                    margin: 5px;
                    img{
                        width: 100%;
                        box-shadow: 0 0 8px #999;
                        border-radius: 6px;
                    }
                }
            }
    }
}
</style>